<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同款比价助手</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid bg-light min-vh-100">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h1 class="display-4 fw-bold text-primary">
                            <i class="fas fa-search-dollar me-3"></i>同款比价助手
                        </h1>
                        <p class="lead text-muted">输入品牌+货号，一键对比三大平台价格</p>
                    </div>

                    <div class="card shadow-lg mb-4">
                        <div class="card-body p-4">
                            <form id="searchForm">
                                <div class="row g-3">
                                    <div class="col-md-5">
                                        <label class="form-label fw-bold">品牌名称</label>
                                        <input type="text" class="form-control form-control-lg" id="brand" 
                                               placeholder="例如：Nike" required>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label fw-bold">商品货号</label>
                                        <input type="text" class="form-control form-control-lg" id="sku" 
                                               placeholder="例如：DD1391-100" required>
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <button type="submit" class="btn btn-primary btn-lg w-100">
                                            <i class="fas fa-search me-2"></i>搜索
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div id="loadingSpinner" class="text-center d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">搜索中...</span>
                        </div>
                        <p class="mt-3 text-muted">正在爬取各大平台数据，请稍候...</p>
                    </div>

                    <div id="resultsContainer" class="d-none">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">
                                    <i class="fas fa-chart-bar me-2"></i>价格分析结果
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row text-center">
                                    <div class="col-md-3">
                                        <div class="border rounded p-3">
                                            <h6 class="text-muted">最低价格</h6>
                                            <h3 class="text-success" id="minPrice">¥0</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="border rounded p-3">
                                            <h6 class="text-muted">最高价格</h6>
                                            <h3 class="text-danger" id="maxPrice">¥0</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="border rounded p-3">
                                            <h6 class="text-muted">平均价格</h6>
                                            <h3 class="text-info" id="avgPrice">¥0</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="border rounded p-3 bg-warning bg-opacity-10">
                                            <h6 class="text-muted">建议定价</h6>
                                            <h3 class="text-warning" id="suggestPrice">¥0</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="platformResults">
                            <!-- 平台结果将动态插入 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
